<template>
	<view>
		<u-navbar :is-back="false" :height="height" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<view class="left">
						<image @click="$p.back()" src="http://image.qxgm.site/tdz/img/public/back.png" mode="widthFix" />
					</view>
					<view class="center">
						<text :style="{ color: color ,fontSize:size , lineHeight:size}">{{ title }}</text>
					</view>

					<view class="posa_right" >
						<view :style="{ color: color }" @click="ziclick()" v-if="righttext != ''">{{righttext}}</view>
					</view>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
export default {
	name: "Header",
	props: {
		color: {
			type: String,
			default: '#FFFDD9'
		},
		color2: {
			type: String,
			default: '#fff'
		},
		iconColor: {
			type: String,
			default: '#fff'
		},
		title: {
			type: String,
			default: '',
		},
		height: {
			type: String,
			default: '70',
		},
		bg: {
			type: String,
			default: 'transparent'
		},
		headertype: {
			type: [Number, String],
			default: 0
		},
		size:{
			type: String,
			default: '22px'
		},
		righttext: {
			type: String,
			default: '',
		},
		path: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			background: {
				background: "transparent",
			},
		};
	},

	created() {
		if (this.headertype == 1) {
			this.background.background = 'transparent'
		}else if (this.headertype == 2) {
			this.background.background = '#F1EFFD'
		}else if (this.headertype == 3) {
			this.background.background = '#F9F9F9'
		}else if (this.headertype == 4) {
			this.background.background = '#000000'
		}
	},
	methods: {
		ziclick(){
			this.$emit('zichange');
		},
	},
}

</script>

<style lang="less">

	// 公用头部返回导航栏
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		background-size: 100% 100%;
	}

	.nav-bar {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 70px;
		max-width: 480px;

		.left {
			width: 18%;
			display: flex;
			justify-content: start;
			box-sizing: border-box;

			image {
				width: 100%;
				z-index: 1000;
			}
		}
		.center {
			text-align: center;
			box-sizing: border-box;
			white-space: nowrap;
			font-size: 21px;
			font-weight: 800;
			color: #FFFFFF;
			line-height: 24px;
			background: linear-gradient(180deg, #FFD6AB 0%, #FFFDE1 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.posa_right {
			width: 25%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: end;
			box-sizing: border-box;

			view {
				font-size: 13px;
				display: flex;
				align-items: center;
			}
		}
	}




</style>